<template>
	<view class="content-box">
		<u-navbar id="navbar" :background="'rgba(12,12,12,0)'" :backIconColor="'rgba(255,255,255,1)'"
			:border-bottom="false" :immersive="true"></u-navbar>
		<view class="column">
			<view class="row-center m-b-20">
				<u-image mode="widthFix" style="width: 750rpx; height: auto; margin-top: 50rpx;"
					:src="'https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/report_1.jpg'">
				</u-image>
			</view>
			<view class="row-center" v-if="goodsdata.video">
				<video :src="goodsdata.video" style="height: 420rpx; width: 100%;"
					:object-fit="fill" :show-mute-btn="true" show-play-btn :controls="true"></video>
			</view>
		</view>
		<view class="column with_green_bg">
			<view class="row-center">
				<u-image mode="widthFix" style="width: 750rpx; height: auto"
					:src="'https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/report_2.png'">
				</u-image>
			</view>
			<view class="row-center">
				<u-image mode="widthFix" style="width: 750rpx; height: auto; position: relative;"
					:src="'https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/report_3.png'">
				</u-image>
				<view class="top_title_text">{{ goodsdata.name || '' }}</view>
			</view>
			<view class="row-left  m-t-30 m-l-30">
				<view class="row-left m-t-50 m-b-40" style="font-size: 46rpx;">羽绒羽毛标准样照</view>
			</view>
			<view class="flex-row-start">
				<view class="flex-row-start tab_view">
					<view class="row-left">
						<scroll-view scroll-y="false" class="tabs-container">
							<view v-for="(tab, index) in tabs1" :key="index" class="tab-item"
								:class="{ active: currentIndex1 === index }" @click="switchTab(index)">
								{{ tab }}
							</view>
						</scroll-view>
					</view>
					<view class="row-right" style="width: 500rpx;">
						<swiper class="swiper" style="min-height: 50vh;" :current="currentIndex1" circular
							:vertical="true" :indicator-dots="false" :autoplay="false">
							<swiper-item>
								<view class="content-item">
									<view class="text_image">
										<u-image mode="widthFix" width="500rpx" height="400rpx"
											src="https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/rong1.png"></u-image>
									</view>
									<view class="text_block">
										● 朵绒：由一个绒核放射出多根绒丝并形成朵状者。<br>
										● 未成熟绒：指未长全的绒子，呈伞状。<br>
										● *判断要点：1. 羽轴根明显，羽轴干短、细，不明显。2. 立体形状，羽枝是绒丝。<br>
										● 类似绒（又称“毛型绒”）：毛型带茎，其茎细而柔软，梢端呈丝状而零乱。<br>
										● 损伤绒：从一个绒核放射出两根及以上绒丝者<br>
									</view>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="content-item">
									<view class="text_image">
										<u-image mode="widthFix" width="500rpx" height="400rpx"
											src="https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/rong2.png"></u-image>
									</view>
									<view class="text_block">
										● 从绒子或毛片根部脱落下来的单根绒丝。<br>
									</view>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="content-item">
									<view class="text_image">
										<u-image mode="widthFix" width="500rpx" style="will-change: transform;"
											src="https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/rong3.png"></u-image>
									</view>
									<view class="text_block">
										● 生长在鹅、鸭全身的羽毛，两端对折而不断。<br>
									</view>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="content-item">
									<view class="text_image">
										<u-image mode="widthFix" width="500rpx"
											src="https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/rong4.png"></u-image>
									</view>
									<view class="text_block">
										● 鹅毛长毛片：鹅毛长度超过8cm的毛片。<br>
										● 鸭毛长毛片：鸭毛长度超过7cm的毛片。<br>
									</view>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="content-item">
									<view class="text_image">
										<u-image mode="widthFix" width="500rpx"
											src="https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/rong5.png"></u-image>
									</view>
									<view class="text_block">
										● 从毛片羽面上脱落下来的单根羽枝。<br>
									</view>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="content-item">
									<view class="text_image">
										<u-image mode="widthFix" width="500rpx"
											src="https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/rong6.jpg"></u-image>
									</view>
									<view class="text_block">
										● 异色毛：白鹅、白鸭毛中的有色毛（包括深黄毛）。上述除作异色毛外，仍列入毛片含量中。<br>
										● 异色绒：白鹅、白鸭绒中的有色绒（包括深黄绒）。上述除作异色绒外，仍列入绒含量中。<br>
									</view>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="content-item">
									<view class="text_image">
										<u-image mode="widthFix" width="500rpx"
											src="https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/rong7.png"></u-image>
									</view>
									<view class="text_block">
										● 虫蛀、霉烂以及加工时机械损伤的毛片，包括折断毛和损伤面积超过总面积三分之一以上的毛片。<br>
										● * 判断要点：1. 损伤面积超过1/3以上的毛片。2. 光秃的羽轴。3. 羽轴的中间被折断。4. 从毛片上脱落的部分羽面。<br>
									</view>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="content-item">
									<view class="text_image">
										<u-image mode="widthFix" width="500rpx"
											src="https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/rong8.png"></u-image>
									</view>
									<view class="text_block">
										●
										鸡毛：鸡毛外观光亮度较强，羽丝一般较鸭毛的多而密，羽面呈现尖长的外观，羽干下部一般有一附羽，能明显地与鹅、鸭毛片区分开。也有部分鸡毛无附羽，因此，附羽并不是确认鸡毛的唯一途径。另有部分小鸡毛的外观呈枝杈形，颜色偏黄，但在投影仪下具有清晰地竹节状显微放大状态。<br>
										● 鸽子毛：从鸽子身上采集的羽毛，外观光亮度较强，肉眼较难将其与鸡毛或水禽毛片分开，一般采用显微放大的方式加以鉴别。<br>
									</view>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="content-item">
									<view class="text_image">
										<u-image mode="widthFix" width="500rpx"
											src="https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/rong9.png"></u-image>
									</view>
									<view class="text_block">
										● 指灰沙、皮屑、小血管等杂物。<br>
										● * 判断要点：1. 草、木头、竹片、纤维、金属丝、塑料、灰砂等外来物。2. 从羽轴上脱落下来的皮管。3. 破裂的羽轴片。4.
										从未熟羽的根部脱落下来的皮蜡状覆盖物。5. 粉片状的破碎的纤维、表皮、羽轴等。6. 羽轴干破断或剥离后剩下的髓。<br>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<view class="row-left m-l-30 m-t-30">
				<view class="row-left m-t-50 m-b-40" style="font-size: 46rpx;">衡量羽绒品质的常用指标</view>
			</view>
			<view class="flex-row-start">
				<view class="flex-row-start tab_view">
					<view class="row-left">
						<scroll-view scroll-y="false" class="tabs-container">
							<view v-for="(tab, index) in tabs2" :key="index" class="tab-item"
								:class="{ active: currentIndex2 === index }" @click="switchTab2(index)">
								{{ tab }}
							</view>
						</scroll-view>
					</view>
					<view class="row-right m-t-5">
						<swiper class="swiper" style="min-height: 50vh;" :current="currentIndex2" circular
							:vertical="true" :indicator-dots="false" :autoplay="false">
							<swiper-item>
								<scroll-view scroll-y="true" style="height: 100%;">
								<view class="content-item">
									<view class="text_image">
										<u-image mode="widthFix" width="500rpx"
											src="https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/zhibiao0.png"></u-image>
									</view>
									<view class="text_block">
										绒子含量是指羽绒羽毛中绒子所占质量的百分比。绒子包括朵绒、未成熟绒、类似绒（毛型绒）、损伤绒。绒子含量是衡量羽绒羽毛及其制品品质的重要指标之一，也是羽绒羽毛贸易价格结算最主要的依据。绒子含量越高，羽绒制品的蓬松度也会越好，保暖性能也更好。
									</view>
								</view>
								</scroll-view>
							</swiper-item>
							<swiper-item>
								<scroll-view scroll-y="true" style="height: 100%;">
								<view class="content-item">
									<view class="text_image">
										<u-image mode="widthFix" width="300rpx"
											src="https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/zhibiao1.png"></u-image>
									</view>
									<view class="text_block">
										通俗的来说，“蓬松度”是国际上衡量羽绒制品保暖程度的重要指标，是衡量一种物质所占（空间）的量度。蓬松度越高=能够固定的空气量越多=保暖性能更好。国际上最常用的“蓬松度”计量单位是in³/30g，即指在限定条件下每30克羽绒所占体积的立方英寸数值。绒子含量与蓬松度密切相关。
										专业解释：引用自《羽绒及其制品的质量与检验》2000版，王华雄著
										蓬松度:羽毛绒蓬松度是衡量羽毛绒水洗、烘干、保存质量的一个指标，同时，羽绒蓬松度的大小又是影响其保暖性能的一个重要因素，因而它也是衡量羽绒品质的一个重要指标。但从人们多年来的检测实践中得知，羽绒蓬松度并不是一个恒定的指标，在经长时间储存、压榨、冷冻等因素影响后，其蓬松度会降低，而经日晒等处理后，又会在一定程度上有所升高。
									</view>
								</view>
								</scroll-view>
							</swiper-item>
							<swiper-item>
								<scroll-view scroll-y="true" style="height: 100%;">
								<view class="content-item">
									<view class="text_image">
										<u-image mode="widthFix" width="260rpx"
											src="https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/zhibiao2.png"></u-image>
									</view>
									<view class="text_block">
										清洁度是衡量羽毛绒的原料质地和水洗水平的一个重要指标，一般采用测定样品水洗液的浊度的方法来得出羽毛绒的清洁度，因而有的标准也称其为浊度。此指标的大小由羽绒洗液中的有机或无机的不溶性或半溶性微粒的数量所决定。
									</view>
								</view>
								</scroll-view>
							</swiper-item>
							<swiper-item>
								<scroll-view scroll-y="true" style="height: 100%;">
								<view class="content-item">
									<view class="text_image">
										<u-image mode="widthFix" width="300rpx"
											src="https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/zhibiao3.png"></u-image>
									</view>
									<view class="text_block">
										耗氧量是测定一定量的羽毛绒中含有的还原性物质，在一定条件下被氧化时所消耗的氧的数量，一般用mg氧/100g毛绒来表示。
										羽毛绒本身的化学性质较为稳定，一般情况下不易被氧化，而其所含的有机和/或无机的还原性物质则不然，化学活性要强得多，在某些情况下，如潮湿闷热环境下，它们营造出利于微生物繁殖的环境，使羽毛绒产生变质，降低羽毛绒的品质。羽毛绒经水洗，可大大降低还原性物质的含量，因此耗氧量是衡量羽毛绒洗涤烘干效果的重要指标之一。
									</view>
								</view>
								</scroll-view>
							</swiper-item>
							<swiper-item>
								<scroll-view scroll-y="true" style="height: 100%;">
								<view class="content-item">
									<view class="text_image">
										<u-image mode="widthFix" width="100rpx"
											src="https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/zhibiao4.png"></u-image>
									</view>
									<view class="text_block">
										鹅鸭毛绒本身含有较高的脂肪，在水洗过程中会洗去其所附的游离脂肪，因而残脂率的高低也是衡量羽毛绒水洗质量的一个指标。
										残脂率检测方法：目前各类羽毛检验方法标准规定的残脂率检验方法普遍采用索氏抽提法，其原理是将羽毛绒样品中的脂肪溶于有机溶剂（如乙醚、二乙醚等）中，将溶剂挥发后，得到抽提出来的脂肪，称重计算后即可得出脂肪含量，即残脂率。
									</view>
								</view>
								</scroll-view>
							</swiper-item>
							<swiper-item>
								<scroll-view scroll-y="true" style="height: 100%;">
									<view class="content-item">
										<view class="text_image">
											<u-image mode="widthFix" width="330rpx"
												src="https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/zhibiao5.png"></u-image>
										</view>
										<view class="text_block">
											异色毛绒是羽绒行业专业用词，是指白色羽毛绒中黑色、灰色绒朵、毛片所占的含量，俗称“黑头”。异色毛绒是成熟鹅鸭身上与生俱来的天然印记（主要是鹅鸭身上自然生长成的，偶尔的彩色是农户为做标记而留）。异色毛绒不是劣质、不洁的代名词，相反是羽绒绒朵成熟、羽绒品质高的表现。异色毛绒的存在不会影响羽绒制品的蓬松度与保暖性。自然界中没有100%全白的白鹅绒，但由于大部分的羽绒寝具和部分羽绒服装会选用白色面料，因此厂家常常要求异色毛绒含量尽可能的低。挑拣异色毛绒的工作一般依靠人工完成，但人工挑拣生产效率低，成本高昂。部分工厂开发了机器挑拣异色毛绒的设备，但效率和成本仍然难以令人满意。
										</view>
									</view>
								</scroll-view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			
			<view class="flex-row-start" style="margin-top: 100rpx;">
				<view class="flex-row-start report_view">
					<view class="row-left" style="width: 300rpx;">
						<view class="title">{{ goodsdata.name || '' }} <br> 检测报告</view>
						<view class="desc">{{goodsdata.desc}}</view>
					</view>
					<view class="row-right">
							<swiper class="swiper" style="min-height: 438rpx; min-width: 310rpx;" :current="currentIndex3" circular :indicator-dots="true" :indicator-color="'rgba(0, 0, 0, .5)'" :indicator-active-color="'#2C6C47'" :autoplay="true">
								<view v-for="(item,index) in goodsdata.images" :key="index">
									<swiper-item>
										<u-image @tap="previewImage(item)" mode="widthFix" width="310rpx" height="438rpx" :src="item"></u-image>
									</swiper-item>
								</view>
							</swiper>
					</view>
				</view>
			</view>
			
			<view class="flex-row-start m-b-40" style="margin-top: 100rpx;">
				<view class="content-container">
					<u-image mode="widthFix" width="750rpx"
						src="https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/report_5.png"></u-image>
				</view>
			</view>
		</view>

		

	</view>
	</view>
</template>

<script>
	import {
		getGoodsQualificationDetail,
	} from '@/api/store';
	export default {
		data() {
			return {
				currentIndex1: 0, // 羽绒羽毛标准样照
				currentIndex2: 0, // 衡量羽绒品质的常用指标
				currentIndex3: 0,
				tabs1: ['绒子', '绒丝', '毛片', '长毛片', '羽丝', '异色毛绒', '损伤毛', '陆禽毛', '杂质'],
				tabs2: ['绒子含量', '蓬松度', '清洁度', '耗氧量', '残脂率', '异色毛绒'],
				videoList: [{
						coverImage: 'https://joy.ytzzmall.com/wechat/static/images/video_pengsong.jpg',
						videoUrl: 'https://joy.ytzzmall.com/wechat/static/images/pengsongdu.mp4'
					},
					{
						coverImage: 'https://joy.ytzzmall.com/wechat/static/images/video_qingjie.jpg',
						videoUrl: 'https://joy.ytzzmall.com/wechat/static/images/qingjiedu.mp4'
					},
					{
						coverImage: 'https://joy.ytzzmall.com/wechat/static/images/video_hanliang.jpg',
						videoUrl: 'https://joy.ytzzmall.com/wechat/static/images/rongzihanliang.mp4'
					},
				],
				videoContexts: {},
				playingIndex: null, // 当前播放视频的索引  
				imgUrl: `${this.$imgUrl}/wechat`,
				goodsdata: {
					title: '狮头白鹅绒',
					desc: '狮头®（皖西）白鹅体型健壮，体态高昂，气质英武，颈长呈弓形，胸深广，背宽平。全身羽毛洁白，头顶长有橘黄色肉瘤。狮头白鹅绒含绒量高，绒朵大，蓬松度高。',
					video1: '',
				},
			}
		},

		onLoad() {
			const options = this.$Route.query;
			console.log("optionsoptions", options)
			console.log("options.scene", options.scene)
			this.id = options.id;
			this.getGoodsQualificationDetailFun();
		},

		methods: {
			switchTab(index) {
				this.currentIndex1 = index;
			},
			switchTab2(index) {
				this.currentIndex2 = index;
			},
			async getGoodsQualificationDetailFun() {
				const {
					data,
					code
				} = await getGoodsQualificationDetail({
					id: this.id,
				});
				if (code == 1) {
					this.goodsdata = data
				} else {
					this.isNull = true
					this.isFirstLoading = false;
				}
			},
			previewImage(current) {
				uni.previewImage({
					current,
					urls: [current] // 需要预览的图片http链接列表
				});
			},
			goPage(videoUrl) {
				this.$Router.push({
					path: '/bundle/pages/goods_video/goods_video',
					query: {
						videoUrl: videoUrl,
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	@import '@/styles/base.scss';

	.content-box {
		background-color: #0c0c0c;
		color: $-color-white;
	}

	.flex-row-start {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
	}

	.tab_view {
		width: 750rpx;
		margin-top: 10rpx;
		min-height: 500rpx;
		.row-left{
			margin-top: 10rpx;
		}

		.tabs-container {
			.tab-item {
				font-size: larger;
				margin-left: 40rpx;
				margin-right: 40rpx;
				margin-bottom: 30rpx;
			}

			.active {
				position: relative;
				display: inline-block;
			}

			.active::after {
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				bottom: -10rpx;
				/* 这里设置下划线与文字之间的间距 */
				border-bottom: 4px solid white;
				/* 设置下划线的样式 */
			}
		}
	}

	.content-container {
		display: flex;
		justify-content: flex-start;

		.text_block {
			line-height: 46rpx;
			font-size: 28rpx;
		}
	}

	.content-item {
		.text_image {
			width: 100%;
			display: flex;
			text-align: center;
			justify-content: center;
			margin-bottom: 20rpx;
			margin-top: 20rpx;
		}
	}

	.row-right {
		width: 520rpx;
	}

	.report_view {
		.row-left {
			padding-top: 60rpx;
			padding-left: 30rpx;
			padding-right: 10rpx;

			.title {
				font-size: 42rpx;
				margin-bottom: 40rpx;
			}

			.desc {
				font-size: 28rpx;
			}
		}

		.row-right {
			width: 450rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.content-container {}

		}

	}
	.with_green_bg{
		background-image: url('https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/report_bg2.jpg');
		background-repeat: no-repeat;
		background-size: cover; /* 图片尺寸 */  
		background-position: center; /* 图片位置 */  
		// background-attachment: fixed; /* 背景是否随页面滚动 */  
	}
	.top_title_text{
		font-size: 40rpx;
		color: #B1CA78;
		position: absolute;
		bottom: -210rpx;
		left: 50rpx;
	}

	image {
		will-change: transform;
	}
</style>